<template>
  <view class="pay-box">
    <!-- <view class="" style="width: 100vw; font-size: 30rpx; overflow-x: scroll">
      {{ shops_code }}
    </view>
    <view class="" style="width: 100vw; font-size: 30rpx; overflow-x: scroll">
      {{ mncode }}
    </view> -->
    <view class="pay-item f-w">
      <image
        class="mch-img"
        src="https://apigw.ktqcy.com/qcy/clouderp-file/v1.0/upload/get/file?url=/app/qcq/BVYSCIIVGOOBY8UX9Q3CAOSAGXS23MCA.png"
      ></image>
      <text class="pay-title">商户名称 </text>
      <view class="pay-name">
        {{ mncode.mchName }}
      </view>
    </view>
    <view class="pay-content">
      <view class="pay-title">消费金额</view>
      <view class="f-w">
        <view class="pay-keyboard-contents f-w">
          <view class="pay-placeholder" v-if="total_amount == ''"
            >请输入金额</view
          >
          <view class="pay-input-lcas" @tap="keyboardShow=true">
            <view class="f-w">
              <!-- <block>{{ total_amount }}</block> -->
              <view v-if="total_amount !== ''">{{ total_amount }}</view>
              <view class="line"></view>
            </view>
          </view>
        </view>
        <text class="pay-unit">元</text>
      </view>
    </view>
    <view class="pay-list">
      <view class="pay-list-flex">
        <view class="pay-list-left">总金额：</view>
        <view class="pay-list-right">¥{{ total_amount || "0.00" }}</view>
      </view>
      <view class="pay-list-flex">
        <view class="pay-list-left">优惠券：</view>
        <view class="pay-list-right nowrap" v-if="!coupon">
          <view class="coupon" v-if="couponName" @tap="couponClick">
            <view class="title">待使用</view>
            <view class="discount">{{ couponName }}</view>
          </view>
          <view v-else @tap="couponClick">
            <view class="title">暂无可使用的优惠券</view>
          </view>
          <up-icon
            name="arrow-right"
            color="#9B9B9B"
            :size="rpx2px(28)"
          ></up-icon>
        </view>
        <view
          class="pay-list-right reduce nowrap"
          @tap="couponClick"
          v-if="coupon"
        >
          <view> - ¥{{ coupon || "0.00" }} </view>
          <up-icon
            name="arrow-right"
            color="#9B9B9B"
            :size="rpx2px(28)"
          ></up-icon>
        </view>
      </view>
      <view
        class="pay-list-flex"
        v-if="currentData.discountShare !== '0' || currentData.couponId === ''"
      >
        <view class="pay-list-left flex-row">
          <up-icon
            name="question-circle"
            @tap="openTips('goldenBeans')"
          ></up-icon>
          荣耀金豆：
        </view>
        <view
          class="pay-list-right"
          :class="goldenBeansNum ? 'reduce' : ''"
          @tap="goUseGoldenBeans"
        >
          <text v-if="goldenBeansNum">- ¥{{ goldenBeansNum }}</text>
          <text v-else>去使用</text>
        </view>
      </view>
      <view class="pay-list-flex">
        <view class="pay-list-left flex-row">
          <up-icon name="question-circle" @tap="openTips('discount')"></up-icon>
          <text>荣誉折扣：</text>
        </view>
        <view class="pay-list-right reduce">
          - ¥{{ discount_amount || "0.00" }}</view
        >
      </view>
      <view class="pay-list-flex">
        <view class="pay-list-left">实付金额：</view>
        <view class="pay-list-right pay-num"
          >¥{{ actual_amount || "0.00" }}</view
        >
      </view>
    </view>
  </view>
  <view class="select-payment-type">
    <view class="select-payment-type-title">请选择支付方式 </view>
    <view class="select-payment-type-item">
      <text>聚合支付</text>
      <image
        v-if="paymentType === 'wechat'"
        class="radio-img"
        src="https://minio.gzryzl.com/huatai/2024-11-12/1731412036628select-active.png"
      ></image>
      <image
        v-else
        class="radio-img"
        src="https://minio.gzryzl.com/huatai/2024-11-12/1731412068610select-radio.png"
        @tap="changePaymentType('wechat')"
      ></image>
    </view>
    <view class="select-payment-type-item">
      <text>现金钱包支付</text>
      <image
        v-if="paymentType === 'cash'"
        class="radio-img"
        src="https://minio.gzryzl.com/huatai/2024-11-12/1731412036628select-active.png"
      ></image>
      <image
        v-else
        class="radio-img"
        src="https://minio.gzryzl.com/huatai/2024-11-12/1731412068610select-radio.png"
        @tap="changePaymentType('cash')"
      ></image>
    </view>
  </view>
  <view class="fixed-btn">
    <view class="btn" @tap="confirmPay">确认支付{{ actual_amount }}元</view>
  </view>
  <up-popup
    :show="show"
    :round="rpx2px(20)"
    mode="bottom"
    @close="show = false"
    @open="open"
    :closeable="true"
  >
    <view class="coupon_box">
      <up-tabs
        :list="couponTabs"
        :current="curTabsIdx"
        :line-width="rpx2px(72)"
        :line-height="rpx2px(20)"
        lineColor="#00B588"
        :itemStyle="couponTabStyle"
        key-name="badgeTypeName"
        @change="handleBadgeTypeTabsChange"
        :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
      />
      <up-checkbox
        :customStyle="{ margin: '8rpx 0 0 20rpx' }"
        label="暂不使用优惠券"
        name="agree"
        usedAlone
        shape="circle"
        v-model:checked="aloneChecked"
      >
      </up-checkbox>
      <view class="coupon_block">
		  <couponCard
		    v-for="item in availableData"
		    :key="item.couponId"
		    :listData="item"
		    :state="curTabsIdx"
		    @on-clikc="headelCouponClick"
		  ></couponCard>
	  </view>
      <none-data v-if="availableData.length == 0" />
    </view>
  </up-popup>
  <keyboard
    :show="keyboardShow"
    :dark="false"
    :isDecimal="true"
    :confirmText="'确认'"
    @confirm="handlerPay"
    @change="getConsumption"
  ></keyboard>
  <!-- 登录弹窗 -->
  <loginDialog
    @on-off="userLoginDialog = false"
    @on-make="headelMake"
    :indicate="userLoginDialog"
  >
  </loginDialog>
  <!-- 折扣/金豆规则提示窗 -->
  <up-popup
    :show="tipsShow"
    mode="center"
    @close="tipsShow = false"
    @open="openTips(tipsType)"
    :safeAreaInsetBottom="false"
    :customStyle="{ borderRadius: '20rpx' }"
  >
    <view v-if="tipsType === 'goldenBeans'" class="tips-block">
      <view class="tips-title">金豆使用规则</view>
      <view class="tips-content">
        <text>使用条件</text>
        <text>1、不同商家有不同的最大荣耀金豆使用数量;</text>
        <text>2、1荣耀金豆抵扣1元</text>
      </view>
    </view>
    <view v-if="tipsType === 'discount'" class="tips-block">
      <view class="tips-title">荣誉折扣</view>
      <view class="tips-content text-center">
        <text>根据所加入企业的荣誉分享受折扣</text>
      </view>
    </view>
  </up-popup>
  <!-- 金豆使用 -->
  <up-popup
    :show="goldenBeansShow"
    mode="bottom"
    @close="goldenBeansShow = false"
    @open="goUseGoldenBeans()"
    :safeAreaInsetBottom="false"
  >
    <view class="golden-beans-block">
      <view class="golden-beans-block-title">荣耀金豆</view>
      <view class="golden-beans-block-content">
		  <view class="golden-beans-block-content-font"
		    >最大金豆使用数量：{{ mncode.maxThreshold }}个</view
		  >
        <view class="golden-beans-block-content-font"
          >荣耀金豆数量：{{ goldenBeansTotal }}个</view
        >
        <view class="golden-beans-block-content-font flex-row-center">
          <text>请输入荣耀金豆数量：</text>
          <view style="width: 181rpx; height: 44rpx">
            <up-input
              @blur="getDiscountGoldenBeans"
              :customStyle="{
                height: '44rpx',
                fontSize: '31rpx',
                backgroundColor: '#F7F8FD',
                padding: '0',
              }"
              type="number"
              clearable
              border="surround"
              v-model="temporaryGoldenBeansNum"
            ></up-input>
          </view>
          <text>个</text>
        </view>
        <view class="golden-beans-block-content-font"
          >抵扣<text class="discount-font">{{ goldenBeansNum }}</text
          >元</view
        >
      </view>
      <view class="btn" @tap="confirm">确认</view>
    </view>
  </up-popup>
  <up-modal
    title="现金钱包支付"
    content="确认使用现金钱包支付"
    :show="showCashWallet"
    showCancelButton
    closeOnClickOverlay
    @confirm="confirmCashPayment"
    @cancel="cancelCashPayment"
    @close="showCashWallet = false"
  ></up-modal>
</template>
<script setup>
import couponCard from "@/package_payment/pages/componments/coupon-card/index.vue";
import { px2Rpx, rpx2px } from "@/utils/utils";
import { customNav } from "@/utils/customNav";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, reactive, computed, watch } from "vue";
import keyboard from "@/package_payment/pages/componments/keyboard.vue";
import {
  getUserDiscountApi,
  zhXzUserPlaceAnOrderApis,
  getMerchantInfoApi,
  getUserPayCanCouponApi,
  zhXzPayUserCancelPayApi,
  yzfUserPlaceAnOrderApi,
  pursePayApi,
  updatePursePayOrderApi,
} from "@/package_payment/pages/api/payment.js";
import { getPurseInfoApi } from "@/api/user/cashWallet.js";

const domain = "http://192.168.100.170:8081/";

const showCashWallet = ref(false); // 现金钱包2次确认
const paymentType = ref("wechat"); // 支付类型
const goldenBeansShow = ref(false); // 荣耀金豆使用弹窗
const keyboardShow = ref(true); // 金额输入框
const tipsType = ref(""); // 解析弹窗类型
const tipsShow = ref(false); // 解析弹窗
const userLoginInfo = ref("");
const userLoginDialog = ref(false);
const total_amount = ref(""); //总金额
const discount_amount = ref(""); //优惠金额
const goldenBeansNum = ref(""); // 荣耀金豆
const goldenBeansTotal = ref(""); // 荣耀金豆总数
const temporaryGoldenBeansNum = ref(""); // 荣耀金豆弹窗
const discount = ref(0); //消费金额
const actual_amount = ref(""); //实付金额
const coupon = ref(""); //优惠券优惠金额
const couponName = ref(""); //优惠券名称
const orderId = ref(""); //订单id
const mncode = ref({});
const option = ref({});
const shops_code = ref("");
const show = ref(false);
const currentData = ref({});
const couponTabs = ref([
  {
    badgeTypeName: "可用优惠券",
  },
  {
    badgeTypeName: "不可用优惠券",
  },
]);
const couponTabStyle = {
  flex: 1,
  fontSize: "31rpx",
  height: "80rpx!important",
};
const certificateData = ref([]);
const availableData = ref([]);
const curTabsIdx = ref(0);
const aloneChecked = ref(false);
watch(aloneChecked, (n, o) => {
  console.log(n);
  console.log(o);
  if (n) {
    cancelClick();
  }
});

//选择支付类型
const changePaymentType = (type) => {
  paymentType.value = type;
};

// 现金钱包支付
const cashWalletPayment = async () => {
  let place = {};
  if (currentData.value.couponId) {
    place = {
      couponId: currentData.value.couponId ? currentData.value.couponId : "", // 优惠卷ID
      initMchId: mncode.value.initMchId,
	  createOrder:true, // 是否下单
      preDiscountAmount: total_amount.value, // 折扣前金额
      goldenBeansNum: temporaryGoldenBeansNum.value, // 荣耀金豆数量
      orderBody: "荣耀殿堂-收银",
    };
  } else {
    place = {
		createOrder:true, // 是否下单
      initMchId: mncode.value.initMchId, // 商户ID
      preDiscountAmount: total_amount.value, // 折扣前金额
      goldenBeansNum: temporaryGoldenBeansNum.value, // 荣耀金豆数量
      orderBody: "荣耀殿堂-收银",
    };
  }

  const res = await pursePayApi(place);
  if (res.code !== 200) return uni.showToast({ title: res.msg, icon: "none" });
  orderId.value = res.data.mch_order_no;
  showCashWallet.value = true;
};

// 现金钱包确认支付
const confirmCashPayment = async () => {
  const place = {
    payOrderType: 1,
    mch_order_no: orderId.value,
  };
  const res = await updatePursePayOrderApi(place);
  showCashWallet.value = false;
  uni.showToast({ title: "支付成功", icon: "none" });
  customNav(`/package_payment/pages/success?amount=${actual_amount.value}`);
};

// 现金钱包取消支付
const cancelCashPayment = async () => {
  const place = {
    payOrderType: 2,
    mch_order_no: orderId.value,
  };
  const res = await updatePursePayOrderApi(place);
  showCashWallet.value = false;
  uni.showToast({ title: "取消支付", icon: "none" });
};

// 聚合支付
const aggregatePayment = async () => {
  uni.showLoading({ title: "支付中..." });
  let place = {};
  if (currentData.value.couponId) {
    place = {
      couponId: currentData.value.couponId ? currentData.value.couponId : "", // 优惠卷ID
      initMchId: mncode.value.initMchId,
      preDiscountAmount: total_amount.value, // 折扣前金额
      payScene: "EXTERNAL-APP", // 固定写死、
      goldenBeansNum: temporaryGoldenBeansNum.value, // 荣耀金豆数量
    };
  } else {
    place = {
      initMchId: mncode.value.initMchId, // 商户ID
      preDiscountAmount: total_amount.value, // 折扣前金额
      payScene: "EXTERNAL-APP", // 固定写死
      goldenBeansNum: temporaryGoldenBeansNum.value, // 荣耀金豆数量
    };
  }

  const res = await yzfUserPlaceAnOrderApi(place);
  if (res.errorCode !== "000000")
    return uni.showToast({ title: res.message, icon: "none" });
  uni.navigateTo({
    url:
      "/package_payment/pages/web-view?url=" +
      encodeURIComponent(JSON.stringify(res.result.paymentUrl)),
  });
};

// 确认支付
const confirmPay = async () => {
  // aggregatePayment
  if (paymentType.value === "wechat") {
    aggregatePayment();
  } else {
    cashWalletPayment();
  }
};

//金豆使用确认
const confirm = () => {
  // 如果使用金豆了 判断是否选中了优惠卷 若选中优惠卷为不可共享 则清除优惠卷 相关信息
  if(currentData.value.discountShare==='0'){
  	  couponName.value=''
  	  coupon.value=''
  	  currentData.value = {}
  }
  getNumber();
  goldenBeansShow.value = false;
};

// 计算荣耀金豆折扣金额
const getDiscountGoldenBeans = () => {
	if(temporaryGoldenBeansNum.value>mncode.value.maxThreshold){
		uni.showToast({ title: "超过商户最大可使用金豆数量", icon: "none" });
		temporaryGoldenBeansNum.value = ''
		return;
	}
	getNumber();
};

// 去使用金豆
const goUseGoldenBeans = () => {
  if (!total_amount.value) {
    uni.showToast({ title: "请输入消费金额", icon: "none" });
    return;
  }
  goldenBeansShow.value = true;
  temporaryGoldenBeansNum.value = "";
  goldenBeansNum.value = "";
  getPurseInfoApi().then((data) => {
    goldenBeansTotal.value = data.data.goldenAmount;
  });
};

// 打开弹窗
const openTips = (type) => {
  tipsType.value = type;
  tipsShow.value = true;
};

// 获取消费金额
const getConsumption = (e) => {
  total_amount.value = e;
};

// 计算金额
const getNumber = async() => {
  if (total_amount.value && discount.value !== 1.0) {
	  let place = {}
	  if (currentData.value.couponId) {
	    place = {
	      couponId: currentData.value.couponId ? currentData.value.couponId : "", // 优惠卷ID
	      initMchId: mncode.value.initMchId,
	  	  createOrder:false, // 是否下单
	      preDiscountAmount: total_amount.value, // 折扣前金额
	      goldenBeansNum: temporaryGoldenBeansNum.value, // 荣耀金豆数量
	      orderBody: "荣耀殿堂-收银",
	    };
	  } else {
	    place = {
	  	  createOrder:false, // 是否下单
	      initMchId: mncode.value.initMchId, // 商户ID
	      preDiscountAmount: total_amount.value, // 折扣前金额
	      goldenBeansNum: temporaryGoldenBeansNum.value, // 荣耀金豆数量
	      orderBody: "荣耀殿堂-收银",
	    };
	  }
	  
	  const res = await pursePayApi(place);
	  const {data} = res
	  coupon.value = data.couponDiscountMoney;  // 优惠券金额
	  discount_amount.value = data.honorDiscountMoney; // 荣誉折扣
	  actual_amount.value = data.discountMoney; // 实付金额
	  goldenBeansNum.value=data.goldenBeansDiscountMoney; // 金豆折扣金额

  } else {
    // couponName.value = "";
    coupon.value = "";
    discount_amount.value = "";
    actual_amount.value = "";
	goldenBeansNum.value="";
	goldenBeansTotal.value="";
	temporaryGoldenBeansNum.value=""
  }
};

//获取支付参数
const handlerPay = async (e) => {
  if (!total_amount.value) return false;
  if (
    !/(^[1-9]{1}[0-9]*$)|(^[0-9]*\.[0-9]{1,2}$)/.test(total_amount.value) ||
    total_amount.value <= 0
  )
    return uni.showToast({ title: "金额错误，请重新输入", icon: "none" });
  keyboardShow.value = false;
  // coupon.value = "";
  // discount_amount.value = "";
  actual_amount.value = e;
  getNumber();
  // goldenBeansNum.value="";
  // goldenBeansTotal.value="";
  // temporaryGoldenBeansNum.value=""
};
// package_payment/pages/index
/**
 * 调微信支付API
 * res：从后端获取的参数，用与调起微支付收银台
 */
const weixinClick = (res) => {
  uni.requestPayment({
    provider: "wxpay",
    timeStamp: res.timeStamp,
    nonceStr: res.nonceStr,
    package: res.package,
    signType: res.signType,
    paySign: res.paySign,
    success: function (res) {
      if (res.errMsg == "requestPayment:ok") {
        //支付成功，跳转至成功页面
        customNav(
          `/package_payment/pages/success?amount=${total_amount.value}`
        );
        // uni.redirectTo({
        //   url: "/pages/index/success?amount=" + total_amount.value,
        // });
      }
    },
    fail: function (err) {
      if (err.errMsg == "requestPayment:fail cancel") {
        zhXzPayUserCancelPay();
      } else {
        uni.showToast({ title: "支付失败", duration: 2000, icon: "none" });
      }
    },
  });
};
/**
 * 网络请求
 * data:请求参数
 * url:请求地址
 */
const httpRequest = async (data, url) => {
  return new Promise((resolve, reject) => {
    uni.request({
      method: "POST",
      header: { "Content-Type": "application/x-www-form-urlencoded" },
      url: domain + url,
      timeout: 1000 * 20,
      data,
      success: (res) => {
        switch (res.statusCode) {
          case 200:
            resolve({
              code: res.data.code,
              data: res.data.data,
              message: res.data.message,
            });
            break;
          case 403 || 404:
            reject({ code: res.statusCode, message: "请求失败，请稍后再试" });
            break;
          case 500:
            reject({ code: res.statusCode, message: "服务器开小差啦" });
            break;
          default:
            reject({ code: res.statusCode, message: "服务器开小差啦" });
            break;
        }
      },
      fail: (err) => {
        uni.showToast({ title: "出错啦，请稍后再试", icon: "none" });
        reject(err);
      },
      complete: (res) => {
        uni.hideLoading();
      },
    });
  });
};
async function zhXzPayUserCancelPay() {
  let IdData = {
    mch_order_no: orderId.value,
  };
  const res = await zhXzPayUserCancelPayApi(IdData);
  const { code, data } = res || {};
  if (code == 200) {
    uni.showToast({
      title: "您已取消支付",
      duration: 2000,
      icon: "none",
    });
  }
}
const getUserDiscount = async () => {
  const res = await getUserDiscountApi();
  console.log(res);
  const { code, data } = res || {};
  if (code == 200) {
    if (data.discount !== 0) {
      discount.value = (1 - Number(data.discount)).toFixed(2);
    } else {
      discount.value = 0;
    }
  } else {
    uni.showToast({
      title: code,
      icon: "none",
    });
  }
};
const queryLocationParams = (url, variable) => {
  var query = url;
  var vars = query.split("?");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return false;
};
const getMerchantInfo = async () => {
  const res = await getMerchantInfoApi(shops_code.value);
  uni.showToast({
    title: res,
    icon: "none",
  });
  const { code, data } = res || {};
  if (code == 200) {
    mncode.value = data;
    getUserPayCanCoupon();
  }
};
function headelCouponClick(data) {
  show.value = false;
  currentData.value = data;
  // 优惠卷不共享金豆
  if (currentData.value.discountShare == "0") {
    temporaryGoldenBeansNum.value = "";
  }
  getNumber();
}
async function getUserPayCanCoupon() {
  console.log("mncode.value", mncode.value);

  const res = await getUserPayCanCouponApi({
    // mchId: shops_code.value,
    initMchId: mncode.value.initMchId,
  });
  const { code, data } = res || {};
  console.log(data);
  if (code == 200) {
    let allowedData = data.filter((item) => item.effective!==false);
    couponName.value = allowedData[0].couponName;
  }
}
function couponClick() {
  show.value = true;
  curTabsIdx.value=0
  aloneChecked.value = false
  getUserPayCanCouponData();
}
async function getUserPayCanCouponData() {
  const res = await getUserPayCanCouponApi({
    initMchId: mncode.value.initMchId,
    // mchId: shops_code.value,
    amount: total_amount.value,
  });
  const { code, data } = res || {};
  if (code == 200) {
    certificateData.value = data;
	let allowedData = []
	if(goldenBeansNum.value){
		allowedData = certificateData.value.filter(
		  (item) => item.effective !== false&&item.discountShare!=='0'
		);
	}else{
		allowedData = certificateData.value.filter(
		  (item) => item.effective !== false
		);
	}
    availableData.value = allowedData;
  }
}
/**
 * 登录弹窗关闭事件
 */
const headelMake = () => {
  userLoginDialog.value = false;
  userLoginInfo.value = uni.getStorageSync("token");
};
function handleBadgeTypeTabsChange(tab) {
  console.log(tab);
  let allowedData = [];
  switch (tab.badgeTypeName) {
    case "可用优惠券":
      allowedData = certificateData.value.filter(
        (item) => item.effective !== false
      );
      availableData.value = allowedData;
	  curTabsIdx.value=0
      break;
    case "不可用优惠券":
      allowedData = certificateData.value.filter(
        (item) => item.effective === false
      );
      availableData.value = allowedData;
	  curTabsIdx.value=1
      break;

    default:
      break;
  }
}
function open() {}
onLoad((options) => {
  // uni.showToast({
  //   title: options,
  //   icon: "none",
  // });

  userLoginInfo.value = uni.getStorageSync("token");
  if (!userLoginInfo.value) {
  } else {
    if (options.q) {
      option.value = JSON.stringify(decodeURIComponent(options.q));
      shops_code.value = queryLocationParams(
        option.value,
        "shops_code"
      ).replace(/"/g, "");
      uni.setStorageSync("shops_code", shops_code.value);
      getMerchantInfo();
    } else if (options.shops_code !== "") {
      shops_code.value = options.shops_code;
      // shops_code.value = "1";
      getMerchantInfo();
    }
    if (
      uni.getStorageSync("shops_code") !== undefined &&
      uni.getStorageSync("shops_code") !== ""
    ) {
      shops_code.value = uni.getStorageSync("shops_code");
      // shops_code.value = "1";
      getMerchantInfo();
    }
    getUserDiscount();
  }
});
function cancelClick() {
  currentData.value = {};
  coupon.value = "";
  getNumber();
  show.value = false;
}
onShow(() => {
  userLoginInfo.value = uni.getStorageSync("token");
  if (!userLoginInfo.value) {
  } else {
    if (
      uni.getStorageSync("shops_code") !== undefined &&
      uni.getStorageSync("shops_code") !== ""
    ) {
      shops_code.value = uni.getStorageSync("shops_code");
      getMerchantInfo();
    }
    getUserDiscount();
  }
});
</script>

<style scoped lang="less">
.fixed-btn {
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 125rpx;
  background-color: @color-origin-white;
  padding: 23rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}
.select-payment-type {
  margin-top: 73rpx;
  padding: 0 38rpx 0 40rpx;
  .select-payment-type-title {
    font-weight: 500;
    font-size: 31rpx;
    color: #000000;
    line-height: 47rpx;
    margin-bottom: 48rpx;
  }
  .select-payment-type-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    font-size: 31rpx;
    color: #272636;
    line-height: 39rpx;
    margin-bottom: 48rpx;
    .radio-img {
      width: 48rpx;
      height: 48rpx;
    }
  }
}
.btn {
  background-image: linear-gradient(to right, #ff934c, #fc686f);
  width: 90vw;
  height: 80rpx;
  border-radius: 50rpx;
  text-align: center;
  line-height: 80rpx;
  color: #ffffff;
  font-family: "ali-m";
  font-size: 32rpx;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-row-center {
  display: flex !important;
  flex-direction: row;
  align-items: center;
}
.golden-beans-block {
  width: 100%;
  height: 463rpx;
  background: #ffffff;
  border-radius: 33rpx 33rpx 0rpx 0rpx;
  margin-top: 35rpx;
  margin-left: 41rpx;
}
.golden-beans-block-title {
  width: 100%;
  text-align: center;
  font-weight: 500;
  font-size: 31rpx;
  color: #000000;
  line-height: 39rpx;
}
.golden-beans-block-content {
  padding-top: 20rpx;
  border-top: 1px solid #f4f5fa;
  display: flex;
  flex-direction: column;
  .golden-beans-block-content-font {
    font-weight: 400;
    font-size: 31rpx;
    color: #000000;
    line-height: 39rpx;
    display: inline-block;
    margin-bottom: 35rpx;
  }
  .discount-font {
    color: #5fb684;
  }
}
.tips-block {
  width: 613rpx;
  height: 287rpx;
  background: #ffffff;
  border-radius: 20rpx;
  margin-top: 42rpx;
  margin-left: 31rpx;
}
.tips-title {
  width: 100%;
  text-align: center;
  font-weight: 400;
  font-size: 39rpx;
  color: #272636;
  line-height: 47rpx;
}
.text-center {
  margin-top: 32rpx;
  display: inline-block;
  text-align: center;
}
.tips-content {
  display: flex;
  flex-direction: column;
  text {
    font-weight: 400;
    font-size: 23rpx;
    color: #272636;
    line-height: 39rpx;
  }
}
.pay-list {
  margin-top: 32rpx;
  .reduce {
    color: red;
  }
  .pay-num {
    font-weight: 500;
  }
  .pay-list-left {
    color: rgba(0, 0, 0, 0.65);
  }
  .pay-list-right {
    font-size: 30rpx;
    &.nowrap {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-content: center;
    }
    .coupon {
      width: 290rpx;
      height: 44rpx;
      font-size: @font-size-23;
      color: @color-font;
      font-weight: 400;
      background: @kuafu-coupon-bg no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 42rpx;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-content: center;
      .title {
        width: 133rpx;
      }
      .discount {
        width: 157rpx;
      }
    }
  }
  .pay-list-flex {
    display: flex;
    justify-content: space-between;
    padding: 24rpx 0;
    border-bottom: 1px solid #f5f7fa;
  }
}
.pay-content {
  .pay-title {
    font-size: 32rpx;
  }
  .pay-keyboard-contents {
    font-size: 40rpx;
    width: 280rpx;
    height: 40rpx;
    position: relative;
    .pay-placeholder {
      text-align: right;
      font-size: 40rpx;
      position: absolute;
      margin-top: 2rpx;
      margin-left: -12rpx;
      width: 100%;
      color: #c0c4cc;
      height: 40rpx;
      line-height: 40rpx;
    }
    .pay-input-lcas {
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      text-align: right;
      position: absolute;
      font-weight: bold;
      height: 40rpx;
      font-size: 40rpx;
      .line {
        display: inline-block;
        width: 4rpx;
        height: 40rpx;
        border: 2rpx;
        background-color: rgba(0, 0, 0, 0.85);
        margin-left: 8rpx;
        margin-top: 6rpx;
        animation: cursorImg 1s infinite steps(1, start);
        @keyframes cursorImg {
          0%,
          100% {
            opacity: 0;
          }
          50% {
            opacity: 1;
          }
        }
      }
    }
  }
  .pay-unit {
    margin-left: 16rpx;
  }
  background-color: #f5f7fa !important;
  border-radius: 16rpx;
  padding: 50rpx 24rpx;
  margin: 42rpx 0 16rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pay-box {
  font-size: 28rpx;
  width: 686rpx;
  margin: 24rpx auto;
  border-radius: 16rpx;
  color: rgba(0, 0, 0, 0.85);
  .pay-item {
    padding: 24rpx 0;
    border-bottom: 1px solid #f5f7fa;
  }
  .pay-title {
    margin-top: 12rpx;
    margin-left: 16rpx;
    font-size: 28rpx;
    font-weight: 500;
  }
  .mch-img {
    width: 70rpx;
    height: 70rpx;
  }
  .pay-name {
    width: 100%;
    font-size: 30rpx;
    font-weight: bold;
    margin-top: 20rpx;
  }
}
:deep(.u-collapse-item) {
  .u-cell__body {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    padding: 18rpx 15rpx 16rpx 15rpx;
    .u-cell__body__content {
      flex: none !important;
    }
  }
  .u-cell--clickable {
    background-color: transparent !important;
  }
  .u-icon__icon {
    display: none;
    color: @color-msg !important;
  }
  .u-collapse-item__content__text {
    color: @color-grey !important;
  }
  .slot_title {
    .u-icon__icon {
      display: flex;
      color: @color-grey !important;
    }
  }
}
.f-w {
  display: flex;
  flex-wrap: wrap;
}
.coupon_box {
  height: 1000rpx;
  // overflow-y: auto;
  padding-top: 80rpx;
  :deep(.u-tabs__wrapper__nav__line) {
    height: 9rpx !important;
  }
  .coupon_block{
	  height: calc(1000rpx - 65rpx);
	  overflow-y: auto;
  }
}
</style>